<template>
	<view class="content">
		<uni-card title="选择收货信息">
			<button type="default" @click="showAddressList()" class="sel-address-btn"
				v-if="useShippingAddress==''">+</button>
			<view v-if="useShippingAddress!=''" @click="showAddressList()" class="sel-address-info">
				<view class="left">
					<uni-icons type="location" size="22" color="#999"></uni-icons>
				</view>
				<view class="center">
					<view>{{useShippingAddress.consignee}} {{useShippingAddress.consigneeMobile}}</view>
					<view>{{useShippingAddress.provinceName + useShippingAddress.cityName + useShippingAddress.districtName + useShippingAddress.address}}</view>
				</view>
				<view class="right">
					<uni-icons type="forward" size="20" color="#999"></uni-icons>
				</view>
			</view>
		</uni-card>

		<uni-card title="商品信息" class="goods">
			<uni-row v-for="item in goodsList">
				<uni-col :span="13">{{item.goodsName}}</uni-col>
				<uni-col :span="4"><text>¥</text>{{item.goodsPrice}}</uni-col>
				<uni-col :span="3" class="right1"><text>X</text>{{item.goodsNum}}</uni-col>
				<uni-col :span="4" class="right2"><text>¥</text>{{item.goodsPrice*item.goodsNum}}</uni-col>
			</uni-row>

			<uni-row>
				<uni-col :span="17" style="font-weight: bold;">合计：</uni-col>
				<uni-col :span="3" class="right1"><text>X</text>{{totalGoodsNum}}</uni-col>
				<uni-col :span="4" class="right2"><text>¥</text>{{totalGoodsMoney}}</uni-col>
			</uni-row>
		</uni-card>

		<uni-card title="备注">
			<input placeholder="可填写备注信息" @blur="bindTextAreaBlur" style="height:40px;" />
		</uni-card>

		<view class="cart-btn" @click="isShowCart=!isShowCart">
			<view class="left">
				<text class="m-l">合计 ¥ </text><text class="m-r"> {{ totalGoodsMoney }}</text>
			</view>
			<view class="right" @click="submitOrder()">提交订单</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="address">
				<view class="title">
					选择收货地址
					<uni-icons type="closeempty" size="20" @click="closeAddressList"></uni-icons>
				</view>
				<scroll-view scroll-y="true" class="list">
					<radio-group @change="radioChange">
						<label class="item" v-for="(item,index) in shippingAddressList">
							<view class="left">
								<radio :value="index.toString()" :checked="useShippingAddress.id == item.id" />
							</view>
							<view :span="18" class="center">
								<view class="addr">{{item.provinceName + item.cityName + item.districtName + item.address}}</view>
								<view class="contact">{{item.consignee}} {{item.consigneeMobile}}</view>
							</view>
							<view class="right">
								<uni-icons type="compose" size="26"
                                           @change.native=""
                                           @click.native="toAddShippingAddress(item)"
                                ></uni-icons>
							</view>
						</label>
					</radio-group>
				</scroll-view>
				<view class="btn">
					<view @click="toAddShippingAddress({})">+新增地址</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import { GoodsApi } from '@/api/food/GoodsApi'
	import { OrderApi } from '@/api/food/OrderApi'

	export default {
		data() {
			return {
				Config: this.$Config,
				Common: this.$Common,
				Auth: this.$Auth,
				ShareUtil: this.$ShareUtil,
				State: this.$store.state,
				Dict: this.$Dict,

                extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'location'
				},
				goodsParam: [],
				goodsList: [],
				totalGoodsNum: 0,
				totalGoodsMoney: 0.00,
				shippingAddressList: [],
				useShippingAddress: '',
				addressIndex: -1,
				remark: ''
			}
		},
		onLoad(e) {
			let that = this
			that.goodsParam = JSON.parse(decodeURIComponent(e.goodsParam))

            GoodsApi.listGoodsByOrder(
				that.goodsParam
			).then((response) => {
				response.forEach(item => {
					item = that.Common.showGoodsPrice(item)
				})
				that.goodsList = response
				response.forEach(item => {
					that.totalGoodsNum += item.goodsNum
					that.totalGoodsMoney += (item.goodsPrice * item.goodsNum)
				})
			})

			this.getDefaultAddress()
		},
		methods: {
			initPage: function() {},
			getDefaultAddress() {
				ShippingAddressApi.getDefaultAddress({}).then((response) => {
					if (response) {
						this.useShippingAddress = response
					}
				})
			},
			getShippingAddressList() {
                ShippingAddressApi.getList({}).then((response) => {
					this.shippingAddressList = response
					if (this.addressIndex > -1) {
						this.useShippingAddress = this.shippingAddressList[this.addressIndex]
					}
				})
			},
			showAddressList() {
				if (this.shippingAddressList.length == 0) {
					this.getShippingAddressList()
				}

				this.$refs.popup.open()
			},
			closeAddressList() {
				this.$refs.popup.close()
			},
			toAddShippingAddress(obj) {
				uni.navigateTo({
					url: '/pages/mall/ShippingAddressUpdate?obj=' + encodeURIComponent(JSON.stringify(obj))
				});
			},
			radioChange(e) {
				this.useShippingAddress = this.shippingAddressList[e.detail.value]
				this.addressIndex = e.detail.value
				this.closeAddressList()
			},
			bindTextAreaBlur: function(e) {
				this.remark = e.detail.value
			},
			submitOrder() {
				if (this.useShippingAddress == '') {
					uni.showToast({
						title: '请选择收货信息',
						icon: 'error'
					});
					return false
				}
				let data = {
					goodsParam: this.goodsParam,
					shippingAddressId: this.useShippingAddress.id,
					remark: this.remark,
					totalMoney: this.totalGoodsMoney * 100
				}

				OrderApi.createOrder(data).then((response) => {
					uni.showToast({
						title: '下单成功',
						icon: 'success'
					});

					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/mall/OrderList'
						})
					}, 1500);
				})
			},
		}
	}
</script>

<style>
	.content {
		padding-bottom: 60px;
	}
	.sel-address-btn {
		color: #DDD;
		font-size: 30px;
		line-height: 45px;
	}
	.sel-address-info {
		display: flex;
		align-items: center;
	}
	.sel-address-info .left {
		width: 30px;
	}
	.sel-address-info .center {
		flex: 1;
	}
	.sel-address-info .right {
		width: 5px;
	}
	.goods .uni-row {
		line-height: 20px;
		border-bottom: 1px solid #EEE;
		font-size: 14px;
		padding: 10px 0;
	}
	.goods .uni-row text {
		font-size: 12px;
	}
	::v-deep .uni-col-3 {
		text-align: center;
	}
	::v-deep .uni-col-4 {
		text-align: right;
	}
	.cart-btn {
		width: 92%;
		height: 50px;
		line-height: 50px;
		position: fixed;
		z-index: 98;
		left: 4%;
		bottom: 10px;
		display: flex;
	}
	.cart-btn .left {
		flex: 2;
		background-color: #333333;
		border-radius: 7px 0px 0px 7px;
		color: #FFF;
		padding-left: 20px;
	}
	.cart-btn .left .m-l {
		font-size: 12px;
	}
	.cart-btn .left .m-r {
		font-size: 18px;
	}
	.cart-btn .right {
		flex: 1;
		background-color: #FB503C;
		border-radius: 0 7px 7px 0;
		text-align: center;
		color: #FFF;
	}
	.address {
		background-color: #FFF;
		border-radius: 15px 15px 0 0;
	}
	.address .title {
		height: 40px;
		line-height: 40px;
		position: relative;
		text-align: center;
	}
	.address .title .uni-icons {
		position: absolute;
		top: 0px;
		right: 13px;
	}
	.address .list {
		padding: 10px 10px 0 10px;
		max-height: 380px;
		overflow: hidden;
	}
	.address .list .item {
		width: 100%;
		display: flex;
		margin-bottom: 10px;
	}
	.address .list .item .left {
		width: 36px;
	}
	.address .list .item .center {
		flex: 1;
		padding: 0 20px 10px 0;
		border-bottom: 1px solid #EEE;
	}
	.address .list .item .center .addr {
		font-size: 14px;
		font-weight: bold;
	}
	.address .list .item .center .contact {
		font-size: 12px;
		color: #999;
		margin-top: 5px;
	}
	.address .list .item .right {
		width: 26px;
		border-bottom: 1px solid #EEE;
	}
	.address .list .item:last-child .center {
		border: none;
	}
	.address .list .item:last-child .right {
		border: none;
	}
	.address .btn {
		height: 54px;
		background-color: #FFF;
	}
	.address .btn view {
		width: 95%;
		margin: 0 auto;
		background-color: #F6F6F6;
		border-radius: 5px;
		height: 45px;
		line-height: 45px;
		text-align: center;
	}
	.uni-card--shadow {
		box-shadow: none !important;
	}
	.uni-card--border {
		border-color: #D2D2D2 !important;
	}
</style>
